<template>
  <div
    v-loading="isLoading > 0"
    class="page-container"
  >
    <page-tools>
      <template #left>
        <el-form
          ref="formSearch"
          size="mini"
          :inline="true"
          :model="formSearch"
          class="demo-form-inline"
        >
          <el-form-item label="用户id">
            <el-input
              v-model="formSearch.id"
              style="width: 100px;"
            />
          </el-form-item>
          <el-form-item label="微信openid">
            <el-input
              v-model="formSearch.openid"
              style="width: 120px;"
            />
          </el-form-item>
          <!-- <el-form-item label="注册时间">
            <el-date-picker
              v-model="formSearch.create_time"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dataChange"
            />
          </el-form-item> -->
          <!-- <el-form-item label="用户id">
            <el-input
              v-model="formSearch.user_id"
              style="width: 100px;"
            />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="formSearch.mobile"
              style="width: 120px;"
            />
          </el-form-item> -->
          <el-form-item>
            <el-button
              type="primary"
              @click.prevent="onResetForm"
            >清空</el-button>
            <el-button
              type="primary"
              @click.prevent="onSearch"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <!-- <template #right>
        <el-button
          type="primary"
          size="mini"
          @click="addUser"
        >新增城市</el-button>
      </template> -->
    </page-tools>

    <el-card style="margin-top: 10px;">
      <el-table
        :data="userList"
        border
      >
        <el-table-column
          label="序号"
          type="index"
          :index="indexMethod"
          fixed="left"
          width="60"
          sortable
        />
        <el-table-column
          label="用户id"
          prop="id"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="微信openid"
          prop="openid"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="微信昵称"
          prop="nickname"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="注册时间"
          prop="create_time"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="充值总金额"
          prop="amount"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="剩余天数"
          prop="question_days"
          fixed="left"
          align="center"
        />
        <el-table-column
          label="剩余题数"
          prop="question_times"
          fixed="left"
          align="center"
        />
        <!-- <el-table-column label="用户id" prop="id" fixed="left" width="70" /> -->
        <!-- <el-table-column label="微信昵称" prop="nickname" width="150" />
        <el-table-column label="手机号" prop="mobile" width="120" />
        <el-table-column label="性别" :formatter="formatGender" width="50" />
        <el-table-column label="出生日期" width="110" sortable>
          <template #default="{ row }">{{ row.birthday | formatTime }}</template>
        </el-table-column>
        <el-table-column label="余额" prop="amount" width="80" />
        <el-table-column label="积分" prop="bonus_points" width="80" />
        <el-table-column label="优惠券" width="70">
          <template #default="{ row }">
            <router-link class="text-link" :to="'/coupon/user_list?user_id=' + row.id">查看</router-link>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" width="110" sortable>
          <template #default="{ row }">{{ row.create_time | formatTime }}</template>
        </el-table-column> -->

        <!-- <el-table-column label="是否上线" width="100">
          <template #default="{ row }">
            <el-switch
              :value="row.status === 1"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeStatus(row)"
            />
          </template>
        </el-table-column>-->
        <!-- <el-table-column
          label="操作"
          fixed="right"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="editUser(row)"
            >编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页组件 -->
      <div style="height: 60px; margin-top: 10px">
        <el-pagination
          :current-page="formSearch.page_num"
          :page-sizes="[10, 20, 30, 50, 100]"
          :page-size="formSearch.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <add-edit
      ref="AddEditDialog"
      @refresh="getUserList"
    />
  </div>
</template>

<script>
const formSearch = {
  id: '',
  openid: '',
  nickname: '',
  // create_time: '',
  page_num: 1,
  page_size: 10
}
import { getUserList, updateOneUser } from '@/api/user'
import CONST from '@/utils/const'
import AddEdit from './components/AddEdit.vue'
export default {
  name: 'UserList',
  components: {
    AddEdit
  },

  data () {
    return {
      formSearch: {},
      isLoading: 0,
      userList: [],
      total: 0
    }
  },
  computed: {},
  created () {
    this.initFormSearch()
    this.getUserList()
  },
  mounted () { },
  methods: {
    dataChange (val) {
      console.log(val)
    },
    initFormSearch () {
      this.formSearch = Object.assign({}, formSearch, this.$route.query)
      this.formSearch.page_num = Number.parseInt(this.formSearch.page_num)
      this.formSearch.page_size = Number.parseInt(this.formSearch.page_size)
    },
    changeQuery () {
      // 获取当前的query参数
      const currentQuery = this.$route.query

      // 将新的筛选条件合并到query参数中
      const newQuery = Object.assign({}, currentQuery, this.formSearch)

      // 使用Vue Router的replace方法更新URL
      this.$router.replace({ query: newQuery })
    },
    onResetForm () {
      this.formSearch = { ...formSearch }
      this.changeQuery()
      this.getUserList()
    },
    onSearch () {
      this.formSearch.page_num = 1
      this.formSearch.page_size = 10
      this.changeQuery()
      this.getUserList()
    },
    addUser () {
      this.$refs.AddEditDialog.open()
    },
    editUser (row) {
      this.$refs.AddEditDialog.open(row)
    },
    formatGender (row) {
      const gender = CONST.GENDER_LIST.find(item => item.id === row.gender)
      return gender ? gender.gender_name : ''
    },
    changeStatus (row) {
      this.$prompt('确定要进行此次操作么？请输入『确定』', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async ({ value }) => {
        if (value === '确定') {
          try {
            this.isLoading++
            await updateOneUser({
              id: row.id,
              status: row.status === 1 ? -1 : 1
            })

            await this.getUserList()
          } finally {
            this.isLoading--
          }
        } else {
          this.$message.error('输入错误')
        }
      })
    },
    async getUserList () {
      try {
        this.isLoading++
        const { id, openid, page_num, page_size } = this.formSearch
        const res = await getUserList({
          id: id ? Number.parseInt(id) : null,
          openid: openid || null,
          // from_date: create_time[0] || null,
          // to_date: create_time[1] || null,
          page_num: Number.parseInt(page_num),
          page_size: Number.parseInt(page_size)
        })
        this.total = res.total
        this.userList = res.list
      } finally {
        this.isLoading--
      }
    },
    indexMethod (index) {
      return index + 1 + (this.formSearch.page_num - 1) * this.formSearch.page_size
    },
    handleSizeChange (val) {
      this.formSearch.page_num = 1
      this.formSearch.page_size = val
      this.changeQuery()
      this.getUserList()
    },
    handleCurrentChange (val) {
      this.formSearch.page_num = val
      this.changeQuery()
      this.getUserList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
